<template>
	<div>
	
		<!-- 注意: dataForm 定义。 @keyup.enter -->
	
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
			<el-form-item>
	
				<el-input v-model="dataForm.proId" placeholder="项目id" clearable></el-input>

			</el-form-item>

			<el-form-item>
	
				<el-input v-model="dataForm.funcName" placeholder="功能名称" clearable></el-input>
	
			</el-form-item>
	
	
	
			<el-form-item>
	
				<el-button @click="getDataList()">查询</el-button>
	
				<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
	
				<!-- <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->

	
			</el-form-item>
	
		</el-form>
	
	
	
		<!-- 数据列表 -->
	
		<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
	
			<el-table-column type="selection" header-align="center" align="center" width="50">
	
			</el-table-column>
	
			<!-- fixed 将当前列固定 默认在左侧 -->
			<el-table-column prop="id" header-align="center" align="center" width="80" label="序号" fixed>
				<template slot-scope="scope">
					<span>{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}</span>
				</template>
			</el-table-column>
	
			<el-table-column prop="projectName" header-align="center" align="center" label="项目名称"  width="250" >
	
			</el-table-column>
	
			<!-- show-overflow-tooltip 当内容过长被隐藏时显示完整提示 -->
			<el-table-column prop="funcName" header-align="center" align="center" label="功能名称" width="250" show-overflow-tooltip>
	
			</el-table-column>

			<el-table-column prop="funcDesc" header-align="center" align="center" label="功能描述" width="250" show-overflow-tooltip>
	
			</el-table-column>

			<el-table-column prop="devCycle" header-align="center" align="center" label="开发周期" show-overflow-tooltip>
	
			</el-table-column>

			<el-table-column prop="processPercent" header-align="center" align="center" label="开发进度" width="90">
				<template slot-scope="scope">
					<span>{{ scope.row.processPercent.toFixed(2) }} %</span>
				</template>
			</el-table-column>
	
			<el-table-column prop="funcIsComplete" header-align="center" align="center" width="180" label="开发状态">
				<template slot-scope="scope">
					<el-tag type="info" v-if="scope.row.funcIsComplete == 0">未开始</el-tag>
					<el-tag type="warning" v-if="scope.row.funcIsComplete == 1">进行中</el-tag>
					<el-tag type="success" v-if="scope.row.funcIsComplete == 2">已完成</el-tag>
                </el-radio-group>
				</template>
			</el-table-column>
	
			<el-table-column prop="testIsComplete" header-align="center" align="center" width="180" label="测试状态">
				<template slot-scope="scope">
					<el-tag type="info" v-if="scope.row.testIsComplete == 0">未开始</el-tag>
					<el-tag type="warning" v-if="scope.row.testIsComplete == 1">进行中</el-tag>
					<el-tag type="success" v-if="scope.row.testIsComplete == 2">已完成</el-tag>
                </el-radio-group>
				</template>
			</el-table-column>
	
			<el-table-column prop="testProblem" header-align="center" align="center" width="180" label="测试问题">
	
			</el-table-column>
	
			<!-- fixed 将当前列固定 在右侧 -->
			<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
	
				<template slot-scope="scope">
	
	                <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
	
	                <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
				</template>
        </el-table-column>
    </el-table>

	<el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataListEvent="getDataList()"></add-or-update>

	</div>
</template>

<script>
import AddOrUpdate from './func-add-or-update'
export default {
	data() {
		return {
			// 交互有关，列表数据加载的时候 loading
			dataListLoading: false,
			addOrUpdateVisible: false,
			// 数据列表
			dataList: [],
			// 分页器对应的变量
			pageIndex: 1,
			pageSize: 10,
			totalPage: 0,
			totalCount: 0,
			// 查询对应的表单
			dataForm: {
				proName: '',
				funcName: '',

			}
		}
	},
	components: {
		AddOrUpdate
	},
	created() {
		this.getDataList()
	},
	methods: {
		async getDataList() {
			// 组装请求参数
			let requestParams = {
				url: this.$httpSdut.adornUrl('/project/func-test/list'),
				method: 'get',
				// 接口参数
				params: this.$httpSdut.adornParams({
					'page': this.pageIndex,
					'limit': this.pageSize,
					'projectName': this.dataForm.projectName,
					'funcName': this.dataForm.funcName
				})
			}

			let {
				data
			} = await this.$httpSdut(requestParams);
			console.log(data)
			if (data && data.code === 0) {
				console.log('page-list', data.page.list)
				this.dataList = [...data.page.list]

				this.totalPage = data.page.totalCount
			} else {
				this.dataList = []
				this.totalPage = 0
			}
		},
		addOrUpdateHandle(id) {
			this.addOrUpdateVisible = true
			this.$nextTick(() => {
                this.$refs['addOrUpdate'].init(id)
            })
		},
		deleteHandle() {},
		selectionChangeHandle() {},
		// 每页数
		sizeChangeHandle (val) {
			this.pageSize = val
			this.pageIndex = 1
			this.getDataList()
		},
		// 当前页
		currentChangeHandle (val) {
			this.pageIndex = val
			this.getDataList()
		},
	}
}
</script>
